import { Table } from "antd"; // antd 是一个 UI 库，里面包含了很多常用组件
import React, { useState } from "react";
import "./style/VisitorList/index.scss"; // 引入样式

// 定义游客数据类型
interface Guest {
  id: number;
  name: string;
  avatar: string;
  online: boolean;
  ip: string;
  createTime: string;
}

// 生成指定数目的游客数据
const generateMockGuests = (count: number): Guest[] => {
  const guests: Guest[] = [];
  for (let i = 1; i <= count; i++) {
    guests.push({
      id: i,
      name: `Guest ${i}`,
      avatar: "https://picsum.photos/600",
      online: Math.random() >= 0.5,
      ip: `192.168.${Math.floor(Math.random() * 256)}.${Math.floor(
        Math.random() * 256
      )}`,
      createTime: new Date(
        2023,
        4,
        Math.floor(Math.random() * 31) + 1,
        Math.floor(Math.random() * 24),
        Math.floor(Math.random() * 60),
        Math.floor(Math.random() * 60)
      ).toLocaleString(),
    });
  }
  return guests;
};

// 表格列定义
const columns: any = [
  {
    title: "ID", // 列标题
    dataIndex: "id", // 对应数据项的 key
    align: "center", // 列文字水平居中对齐方式
  },
  {
    title: "游客名称", // 列标题
    dataIndex: "name", // 对应数据项的 key
    render: (text: string) => (
      <span style={{ textAlign: "center" }}>{text}</span>
    ), // 渲染每个单元格的内容，这里使用 <span> 标签，并设置居中对齐样式
    align: "center", // 列文字水平居中对齐方式
  },
  {
    title: "游客头像", // 列标题
    dataIndex: "avatar", // 对应数据项的 key
    render: (avatar: string) => (
      <div style={{ textAlign: "center" }}>
        <img
          src={avatar} // 显示图片的 URL 地址
          alt="avatar"
          style={{ maxWidth: 40, maxHeight: 40, cursor: "zoom-in" }}
          onClick={(e) => {
            const modal = document.createElement("div");
            modal.style.position = "fixed";
            modal.style.top = "0";
            modal.style.left = "0";
            modal.style.width = "100%";
            modal.style.height = "100%";
            modal.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
            modal.style.zIndex = "9999";
            modal.style.display = "flex";
            modal.style.alignItems = "center";
            modal.style.justifyContent = "center";

            const img = document.createElement("img");
            img.src = avatar;
            img.style.maxWidth = "180vw";
            img.style.maxHeight = "180vh";
            img.style.cursor = "zoom-out";

            modal.appendChild(img);

            document.body.appendChild(modal);

            modal.addEventListener("click", () => {
              document.body.removeChild(modal);
            });
          }}
        />
      </div>
    ),
    align: "center", // 列文字水平居中对齐方式
  },
  {
    title: "在线状态", // 列标题
    dataIndex: "online", // 对应数据项的 key
    render: (online: boolean) => (
      <span
        style={{ color: online ? "#52c41a" : "#f5222d", textAlign: "center" }}
      >
        {online ? "在线" : "离线"}
      </span>
    ),
    align: "center", // 列文字水平居中对齐方式
  },
  {
    title: "IP", // 列标题
    dataIndex: "ip", // 对应数据项的 key
    align: "center", // 列文字水平居中对齐方式
  },
  {
    title: "创建时间", // 列标题
    dataIndex: "createTime", // 对应数据项的 key
    align: "center", // 列文字水平居中对齐方式
  },
];

// 表格组件
const TableDemo: React.FC = () => {
  const [pageSize, setPageSize] = useState<number>(7); // 定义每页显示条数的状态变量，初始值为 10
  const [guests, setGuests] = useState<Guest[]>(generateMockGuests(100)); // 定义游客数据的状态变量，初始值为 100 条随机数据
  const [currentPage, setCurrentPage] = useState<number>(1); // 定义当前页码的状态变量，初始值为 1

  // 处理每页显示条数变化的回调函数
  const handlePageSizeChange = (current: number, size: number) => {
    setPageSize(size); // 更新 pageSize 的状态变量
  };

  // 处理页码变化的回调函数
  const handlePageChange = (page: number) => {
    setCurrentPage(page); // 更新 currentPage 的状态变量
  };

  // 根据当前页码和每页显示条数计算起始和结束索引
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;

  return (
    <Table
      className="visitorTables" // 自定义样式类名，可以使用 CSS 进行样式定制
      style={{ textAlign: "center" }} // 表格文字居中对齐样式
      columns={columns} // 表格列定义
      dataSource={guests
        .slice(startIndex, endIndex)
        .map((guest) => ({ ...guest, key: guest.id }))} // 表格数据源，根据当前页码和每页显示条数进行切片
      pagination={{
        showSizeChanger: true, // 是否显示每页条数下拉框
        onShowSizeChange: handlePageSizeChange, // 每页条数变化时的回调函数
        pageSizeOptions: ["5", "10", "20", "50"], // 每页条数下拉框中的选项
        current: currentPage, // 当前页码
        total: guests.length, // 数据总数
        showQuickJumper: true, // 是否显示快速跳转输入框
        onChange: handlePageChange, // 页码变化时的回调函数
        showTotal: (total, range) => `每页显示 ${pageSize} 条，共 ${total} 条`,
      }}
    />
  );
};

export default TableDemo; // 导出表格组件
